<template>
  <div
    ref="box"
    style="background-color: white; padding: 50px; box-sizing: border-box"
  >
    <el-row justify="space-between">
      <el-col :xs="5" :sm="5" :lg="6">
        <el-space direction="vertical" :size="40">
          <el-card shadow="hover">
            <div class="msgBox">
              <img src="@/static/img/home/menu.svg" />
              <el-space
                v-show="screenWidth >= 1100"
                direction="vertical"
                :size="5"
                alignment="flex-start"
              >
                <span class="title">商品数量</span>
                <span>
                  <CountTo
                    :startVal="0"
                    :endVal="initData.goodsCount"
                    :decimals="0"
                    :duration="1500"
                  ></CountTo>
                </span>
              </el-space>
            </div>
          </el-card>
          <el-card shadow="hover">
            <div class="msgBox">
              <img src="@/static/img/home/news.svg" />
              <el-space
                v-show="screenWidth >= 1100"
                direction="vertical"
                :size="5"
                alignment="flex-start"
              >
                <span class="title">未发货单</span>
                <span>
                  <CountTo
                    :startVal="0"
                    :endVal="initData.waitStockCount"
                    :decimals="0"
                    :duration="1500"
                  ></CountTo>
                </span>
              </el-space>
            </div>
          </el-card>
        </el-space>
      </el-col>
      <el-col :xs="17" :sm="17" :lg="16">
        <div ref="pillar" style="height: 350px"></div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="10">
        <div ref="line" style="height: 400px"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div ref="pie_1" style="height: 500px"></div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div ref="pie_2" style="height: 500px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { CountTo } from "vue3-count-to";
import { post } from "@/utils/http";
import * as echarts from "echarts";
export default {
  components: { CountTo },
  data() {
    return {
      initData: {},
      screenWidth: null,
    };
  },
  methods: {
    getData() {
      post({ _gp: "admin.dashboard", _mt: "integral" }).then((res) => {
        if (200 == res.errno) {
          this.initData = res.data;
          let line = echarts.init(this.$refs.line);
          let pillar = echarts.init(this.$refs.pillar);
          let pie_1 = echarts.init(this.$refs.pie_1);
          let pie_2 = echarts.init(this.$refs.pie_2);
          //柱状图7日订单
          pillar.setOption({
            title: {
              text: "7日订单",
              left: "left",
            },
            xAxis: {
              type: "category",
              data: res.data.daysOrder[0],
            },
            yAxis: {
              type: "value",
            },
            legend: {
              left: "right",
            },
            series: [
              {
                itemStyle: {
                  color: "#01b5ff",
                },
                barWidth: "40%",
                name: "订单数",
                data: res.data.daysOrder[1],
                type: "bar",
              },
            ],
          });
          // 饼状图1
          pie_1.setOption({
            title: {
              text: "订单地区分布",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              data: ["地区分布"],
              left: "right",
            },
            series: [
              {
                name: "地区分布",
                type: "pie",
                // radius: '50%',
                data: res.data.area,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
          // 饼状图2
          pie_2.setOption({
            title: {
              text: "订单渠道分布",
              left: "left",
            },
            tooltip: {
              trigger: "item",
            },
            series: [
              {
                name: "渠道分布",
                type: "pie",
                // radius: '50%',
                data: res.data.channel,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          });
          line.setOption({
            title: {
              text: "7日成交金额",
              left: "left",
            },
            xAxis: {
              type: "category",
              data: res.data.daysSum[0],
            },
            yAxis: {
              type: "value",
            },
            legend: {
              left: "right",
            },
            series: [
              {
                name: "订单数",
                data: res.data.daysSum[1],
                type: "line",
              },
            ],
          });
        }
      });
    },
  },
  watch: {
    screenWidth() {
      echarts.init(this.$refs.line).resize();
      echarts.init(this.$refs.pillar).resize();
      echarts.init(this.$refs.pie_1).resize();
      echarts.init(this.$refs.pie_2).resize();
    },
  },
  mounted() {
    this.getData();
    // 获取屏幕宽度
    this.screenWidth = document.body.clientWidth;
    window.onresize = () => {
      //屏幕尺寸变化就重新赋值
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
};
</script>

<style lang="less" scoped>
.msgBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-space {
    font-weight: 700;
    margin-left: 60px;
    width: 80px;
    .title {
      color: #828282;
    }
  }
}
</style>
